<div class="container">
    <nz-page-header nzBackIcon [nzTitle]="user ? user.username : null"></nz-page-header>
    <div class="user-card">
        <div class="user-background"></div>
        <div class="user-profile">
            <nz-avatar class="user-avatar" [nzSize]="130"
                       [nzSrc]="user ? user.mediumAvatar : null"
                       [nzIcon]="!(user && user.mediumAvatar) ? 'user' : null"></nz-avatar>
            <button *ngIf="user && isSelf()" nz-button nzType="primary" nzShape="round" nzGhost nzSize="large"
                    class="user-edit-profile">
                编辑资料
            </button>
            <button *ngIf="user && !isSelf() && isFollowing()"
                    nz-button nzType="primary" nzShape="round" nzGhost
                    nzSize="large"
                    class="user-edit-profile" (click)="handleCancelFollow()">
                关注中
            </button>
            <button *ngIf="user && !isSelf() && !isFollowing()"
                    nz-button nzType="primary" nzShape="round" nzGhost
                    nzSize="large"
                    class="user-edit-profile" (click)="handleFollow()">
                关注
            </button>
            <div class="user-info-zone">
                <div class="user-name">{{user ? user.name : ''}}</div>
                <div class="user-username">{{user ? '@' + user.username : ''}}</div>
                <div class="user-more-info">
                    <span class="user-more-info-item">
                        <i nz-tooltip nz-icon nzType="environment" nzTheme="outline"></i>
                        中华人民共和国
                    </span>
                    <span class="user-more-info-item">
                        <i nz-tooltip nz-icon nzType="bulb" nzTheme="outline"></i>
                        出生于{{user ? (user.birthday | date: birthdayFormat) : ''}}
                    </span>
                    <span class="user-more-info-item">
                        <i nz-tooltip nz-icon nzType="calendar" nzTheme="outline"></i>
                        {{user ? (user.createAt | date: createAtFormat) : ''}}加入
                    </span>
                </div>
                <div class="user-relation-info">
                    <a class="user-relation-info-item" [routerLink]="user ? '/' + user.username + '/followings' : ''">
                        <label class="user-relation-count">{{user ? user.followingCount : 0}}</label> 个正在关注
                    </a>
                    <a class="user-relation-info-item" [routerLink]="user ? '/' + user.username + '/followers' : ''">
                        <label class="user-relation-count">{{user ? user.followersCount : 0}}</label> 个关注者
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div id="container-tweet-list">
        <app-tweet-card *ngFor="let tweet of tweetList" [tweet]="tweet"></app-tweet-card>
    </div>
</div>
